<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>学生管理</title>
	<link rel="stylesheet" href="/css/common2.css">
	<link rel="stylesheet" href="/css/popup.css">
	<link rel="stylesheet" href="/scriptZIP/vue-select.min.css">
	<style>
		/* .search_img {
			position: absolute;
			right: 3%;
		} */
		.filter-container {
			display: inline-block;
			flex-wrap: wrap;
			/* 允许换行 */
			gap: 10px;
			/* 输入框之间的间距 */
			max-width: 800px;
			/* 设置最大宽度，可以根据需要调整 */
		}

		.import_model {
			margin-top: -35px;
			margin-left: 130px;
		}

		.table {
			width: 100%;
			margin-left: 0;
		}

		.five {
			max-height: 55px !important;
			min-width: 130px !important;
			padding: 0;
		}

		.three {
			min-width: 100px;
			width: 9%;
		}

		.phone {
			color: blue;
		}

		.long-background-img {
			width: 120px;
			height: 35px;
			background: url("../image/enter_longer.png") no-repeat center center !important;
		}

		.nickname {
			position: absolute;
			left: 40px;
			bottom: calc((100% - 35px) / 2);
			width: 80px;
			text-align: left;
			display: inline-block;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}

		.untying {
			position: absolute;
			right: 0;
			bottom: 0;
			display: inline-block;
			font-size: 12px;
			cursor: pointer;
			color: #9F9F9F;
		}

		.img-box {
			width: 35px;
			height: 35px;
			display: inline-block;
			padding: 0;
		}

		.phone {
			display: inline-block;
		}

		.header {
			width: 35px;
			height: 35px;
			position: absolute;
			left: 3px;
			bottom: calc((100% - 35px) / 2);
			display: inline-block;
			border-radius: 50%;
		}

		.choose-class {
			width: 94%;
			height: 35px;
			margin-left: 3%;
			margin-top: 35px;
		}

		.popup {
			width: 330px;
			height: 300px;
			/* margin: calc((100% - 300px) / 6) calc((100% - 300px) / 2); */
		}

		.popup-title {
			padding-left: 100px;
		}

		.relatives-info {
			display: inline-block;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			vertical-align: text-top;
			text-align: left;
		}

		.relatives-name {
			text-indent: 1em;
			width: calc(100% - 13em);
		}

		.relatives-relation {
			width: 5em;
		}

		.info2 {
			margin-top: 0.5em;
			vertical-align: text-top;
		}

		.relatives_info {
			width: 3.5em;
			display: inline-block;
			vertical-align: text-top;
		}

		.relatives_info img {
			height: 3.5em;
			width: 100%;
			border-radius: 50%;
			margin: 0 0.25em;
		}

		.uihf {
			display: flex;
		}

		.search_img {
			margin-top: 5px;
		}

		.search {
			position: relative;
			right: 0px;
			margin: 5px 10px 0 0;
		}
	</style>
	<style scoped>
		.option {
			display: flex;
			align-items: center;
			justify-content: center;
			padding-left: 0;
		}

		.four .option-icon {
			width: 40px;
			display: flex;
			justify-content: center;

		}
		.enroll-button {
		display: inline-block;
		padding: 10px 20px;
		background-color: #69bbf4; /* 绿色背景 */
		color: white; /* 字体颜色为白色 */
		font-weight: bold;
		text-align: center;
		text-decoration: none;
		border-radius: 5px; /* 圆角效果 */
		box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* 阴影效果 */
		transition: background-color 0.3s ease; /* 鼠标悬停时的平滑过渡 */
	}

	.enroll-button:hover {
		background-color: #c52626; /* 悬停时更深的绿色 */
	}
	td {
      max-width: 150px; /* 最大宽度 */
      overflow: hidden; /* 隐藏溢出 */
      text-overflow: ellipsis; /* 显示省略号 */
      white-space: nowrap; /* 防止换行 */
  }
	</style>
</head>

<body>
	<div id="vue-root" style="margin-top: 30px;">

		<div class="filter-container">
			<div class="add" v-if="able.add">
				<a href="educational_student_item.html" style="color: white">添加学生</a>
			</div>
			
			<div class="refresh" onclick="location.reload()">刷新</div>
			<div class="uihf">
				<input placeholder="请输入学生姓名" class="search" v-model="search.name" @keyup.enter="getData0"
				style=" width: 120px; height: 33px;">
			<input placeholder="请输入家长姓名" class="search" v-model="search.parentNames" @keyup.enter="getData0"
				style=" width: 120px; height: 33px;">
			<input placeholder="请输入手机号" class="search" v-model="search.bindCode" @keyup.enter="getData0"
				style="width: 120px; height: 33px;">
			
			<select class="search" v-model="search.gardeId">
				<option :value="undefined">请选择年级</option>
				<option v-for="garde in grades" :key="garde.id" :value="garde.id" v-text="garde.name">
				</option>
			</select>

			<select class="search" v-model="search.courseId">
				<option :value="undefined">请选择课程</option>
				<option v-for="course in courses" :key="course.id" :value="course.id" v-text="course.name">
				</option>
			</select>

			<select class="search" v-model="search.orderType">
				<option :value="undefined">请选择类型</option>
				<option value="1">新签</option>
				<option value="2">续费</option>
				<option value="3">新签尾款</option>
			</select>
			
			<select class="search" v-model="search.studentStatus">
				<option :value="undefined">请选择状态</option>
				<option value="在读">在读</option>
				<option value="过期">过期</option>
			</select>

			<select class="search" v-model="search.type">
				<option :value="undefined">请选择报读模式</option>
				<option value="1">按课时收费</option>
				<option value="2">月收费</option>
				<option value="3">天收费</option>
				<option value="4">按季收费</option>
				<option value="5">按期收费</option>
				<option value="6">按课包收费</option>
				<option value="7">按体验收费</option>
			</select>


				<img src="../image/search.png" height="35" width="35" class="search_img" @click="getData0" />
			</div>
		</div>
		<form enctype="multipart/form-data" id="form" ref="form" style="display: none;">
			<input type="file" name="file" id="file" @change="importExcel" ref="file"
				accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">
		</form>
		<div class="table " style="margin-left: 2%;width: 96%; overflow: auto;">
			<table class="table_top">
				<thead>
					<tr>
						<th class="one">
							<input type="checkbox" class="check-box" v-model="all">
						</th>
						<th class="one">序号</th>
						<th class="one">校区</th>
						<th class="one">学员姓名</th>
						<th class="three">性别</th>
						<th>就读学校</th>
						<th class="one">家长姓名</th>
						<th class="one">联系电话</th>
						<th class="one">微信号</th>
						<th class="one">绑定人</th>
						<th class="one">年级</th>
						<th class="one">班级</th>
						<th class="one">报读课程</th>
						<th class="one">状态</th>
						<th class="one">报读模式</th>
						<th class="one">类型</th>
						<th class="one">报名</th>
						<th class="three">编辑/删除</th>
					</tr>
				</thead>
				<tbody id="list">
					<tr v-for="(student,index) in list" :key="student.id">
						<td>
							<input type="checkbox" class="check-box" v-model="student.checked">
						</td>
						<td class="one"><span v-text="index+1"></span></td>
						<td class="one" v-text="student.schoolNamea"></td>
						<td class="one" v-text="student.name"></td>
						<td class="one" v-text="student.sex?'男':'女'"></td>
						
						<td class="one" v-text="student.schoolName"></td>
						<td class="one">
							{{ student.fatherName }}{{ student.fatherName && student.motherName ? ', ' : '' }}
							{{ student.motherName }}{{ student.motherName && student.grandadName ? ', ' : '' }}
							{{ student.grandadName }}{{ student.grandadName && student.grandmaName ? ', ' : '' }}
							{{ student.grandmaName }}
						</td>
						<td class="one" v-text="student.bindCode"></td>
						<td class="one" v-text="student.wechatId"></td>
						<td class="five">
							<button v-if="bindCount(student)" @click="bindClick(student)">绑定{{bindCount(student)}}人
							</button>
						</td>
						<td class="one" v-text="student.gardeName"></td>
						<td :title="student.classesName">{{student.classesName}}</td>
						<!-- <td class="one" v-text="student.classesName"></td> -->
						<td :title="student.courseNames">{{student.courseNames}}</td>
						<td :title="student.courseStatuses">{{student.courseStatuses}}</td>
						<td :title="gettypes(student.types)">{{ gettypes(student.types) }}</td>
						<td :title="getorderTypes(student.orderTypes)">{{ getorderTypes(student.orderTypes)}}</td>
						<!-- <td class="one" v-text="student.courseNames"></td>
						<td class="one" v-text="student.courseStatuses"></td>
						<td class="one" v-text="gettypes(student.types)"></td>
						<td class="one" v-text="getorderTypes(student.orderTypes)"></td> -->
						<td>
							<a :href="'student_enrolment.html?id=' + student.id" class="enroll-button">
								报名
							</a>
						</td>



						<td class="three">
							<div class="option" style="position: relative;">
								
								<div v-if="able.edit" class="edit-icon option-icon">
									<a :href="'educational_student_item.html?id='+student.id">
										<img class="img" src="../image/edit.png" height="20" width="20"
											onmouseover="this.src='../image/edit_light.png'"
											onmouseout="this.src='../image/edit.png'" />
									</a>
								</div>
								<div v-if="able.del" @click="del([student.id])" class="delete-icon option-icon">
									<img class="img" src="../image/delete.png" height="20" width="20"
										onmouseover="this.src='../image/delete_light.png'"
										onmouseout="this.src='../image/delete.png'" />
								</div>
							</div>
						</td>
					</tr>
					<tr></tr>
				</tbody>
			</table>
		</div>
		<br>
		<div class="delete" @click="batchDelete" v-if="able.del">批量删除</div>
		<div class="delete long-background-img" v-if="able.export" @click="exports">批量导出学生</div>
		<!-- <div v-if="able.edit" class="delete long-background-img" @click="changeClasses">批量修改班级</div>
		<a v-if="able.edit" href="./educational_change_class.html">
			<div class="delete long-background-img">批量调班</div>
		</a> -->
		<ul class="pagination" v-if="pages>1">
			<li>
				<a v-if="pageNum!=1" @click="pageNum=1">«</a>
				<a class="pages-jump" v-if="pageNum!=1" @click="pageNum--">‹</a>
				<a v-text="pageNum"></a>
				<a class="pages-jump" v-if="pageNum!=pages" @click="pageNum++">›</a>
				<a v-if="pageNum!=pages" @click="pageNum=pages">»</a>
			</li>
			<li>
				<a v-text="pages"></a>
			</li>
		</ul>
		<div style="float: right;">
			总共{{total}}条记录
			<select class="ui-select init" style="height:32px" v-model="pageSize">
				<option :value="10">每页10条</option>
				<option :value="30">每页30条</option>
				<option :value="100">每页100条</option>
			</select>
		</div>
		<!--遮罩层-->
		<div v-if="popup">
			<div class="model-table5">
				<div class="popup">
					<div class="popup-title">修改班级</div>
					<div class="popup-center">
						<v-select placeholder="请选择班级" label="name" :options="classess" :reduce="item=>item.id"
							v-model="toClassesId"></v-select>
						<button class="sure" @click="sure">确定</button>
						<button class="back" @click="popup=false">取消</button>
					</div>
				</div>
			</div>
		</div>


		<div class="model-table5" v-if="boundShow" @click="boundShow=false">
			<div class="popup" @click.stop>
				<div class="popup-title">绑定人信息</div>
				
				<div class="popup-center" v-if="shownStudent.accounts[0]">
					<div class="relatives_info">
						<img :src="headimgurl(shownStudent,0)" v-if="headimgurl(shownStudent,0)">
					</div>
					<div class="relatives-info info2 relatives-name" v-text="nickname(shownStudent,0)"></div>
					<div class="relatives-info info2 relatives-relation">本人</div>
					<button v-if="able.edit" class="info2" @click="unbind(shownStudent,0)">解绑</button>
				</div>
				<div class="popup-center" v-if="shownStudent.accounts[1]">
					<div class="relatives_info">
						<img :src="headimgurl(shownStudent,1)" v-if="headimgurl(shownStudent,1)">
					</div>
					<div class="relatives-info info2 relatives-name" v-text="nickname(shownStudent,1)"></div>
					<div class="relatives-info info2 relatives-relation">父亲</div>
					<button v-if="able.edit" class="info2" @click="unbind(shownStudent,1)">解绑</button>
				</div>
				<div class="popup-center" v-if="shownStudent.accounts[2]">
					<div class="relatives_info">
						<img :src="headimgurl(shownStudent,2)" v-if="headimgurl(shownStudent,2)">
					</div>
					<div class="relatives-info info2 relatives-name" v-text="nickname(shownStudent,2)"></div>
					<div class="relatives-info info2 relatives-relation">母亲</div>
					<button v-if="able.edit" class="info2" @click="unbind(shownStudent,2)">解绑</button>
				</div>
				<div class="popup-center" v-if="shownStudent.accounts[3]">
					<div class="relatives_info">
						<img :src="headimgurl(shownStudent,3)" v-if="headimgurl(shownStudent,3)">
					</div>
					<div class="relatives-info info2 relatives-name" v-text="nickname(shownStudent,3)"></div>
					<div class="relatives-info info2 relatives-relation">其他家长</div>
					<button v-if="able.edit" class="info2" @click="unbind(shownStudent,3)">解绑</button>
				</div>
			</div>

	</div>
	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/scriptZIP/vue-select.min.js"></script>

	<script src="/scriptZIP/vue-select.min.js"></script>


	<script src="/lib/laydate/laydate.js"></script>
	<script src="/js/common.js"></script>
	<script src="/js/list.js"></script>
	<script src="/js/auth_util.js"></script>


	<script>
		var schoolId = top_params().id;
		var agentId=localStorage.getItem('agentId')
		Vue.component('v-select', VueSelect.VueSelect);
		var app = new Vue(merge({
			data: {
				schools: [],
				promoters: [],
				peoples: [],
				courses: [],
				grades:[],
				dataSource: null,
				dataStatus: null,
				dataIntent: null,
				selectedDataSourceIndex: null, // 添加这里
				selectedDataStatusIndex: null,   // 添加这里
				selectedDataIntentIndex: null,    // 添加这里
				urls: {
					del: '/pc/student/del'
				},
				popup: false,
				toClassesId: null,
				boundShow: false,
				shownStudent: null
			},
			created: function () {
				this.urls.list = '/pc/student/list?schoolId=' + schoolId;
				this.urls.imports = '/pc/student/import/' + this.agentId;
				this.getData();
				abled('studentMessage', this);
				
				axios.get('/pc/grade/all').then(function (res) {
						this.grades = res.data;
					}.bind(this));

					axios.get('/pc/course/all/' + agentId).then(function (res) {
					this.courses=res.data
				}.bind(this));

				
				
			},

			methods: {

				gettypes(str){
					if(!str)return '';
					var arr=''
					let arr2 = str.split(",");
					let arr3=['按课时','按月','按天','按季','按期','按课包','按体验']
					
					for (let i = 0; i < arr2.length; i++) {
						arr=arr+arr3[(Number(arr2[i])-1)]+','
					}
					arr=arr.slice(0, -1)
					return arr;
				},
				getorderTypes(str){
					if(!str)return '';
					var arr=''
					let arr2 = str.split(",");
					let arr3=['新签','续费','新签尾款']
					for (let i = 0; i < arr2.length; i++) {
						arr=arr+arr3[(Number(arr2[i])-1)]+','
					}
					arr=arr.slice(0, -1)
					return arr;
				},
				formatCourseNames(names) {
					if (Array.isArray(names)) {
						return names.join(', ');
					}
					return ''; // 或者返回其他默认值
				},
				fetchCourses: function () {
					if (this.search.schoolId) {
						axios.get('/pc/course/all/' + this.search.schoolId).then(function (res) {
							this.courses = res.data
						}.bind(this));
					} else {
						this.courses = [];
					}

				},
				exports: function () {
					var q = Qs.stringify(this.search);
					if (q) q = '&' + q;
					// console.log();
					location.href = '/pc/student/export1?schoolId=' + schoolId + q;
				},
				unbind: function (student, type) {
					if (!confirm('确定解除此绑定吗？')) return;
					axios.post('/pc/student/unbind/' + student.id + '/' + type).then(function (res) {
						student.accounts.splice(type, 1, null);
					});
				},
				getImg: function (pic) {
					if (!pic) return null;
					return '/static/' + '/student/' + pic;
				},
				account: function (student, type, field) {
					var account = student.accounts[type];
					if (!account) return null;
					return account[field];
				},
				bindCount: function (student) {
					return student.accounts.filter(function (it) {
						return it;
					}).length;
				},
				bindClick: function (student) {
					this.shownStudent = student;
					this.boundShow = true;
				},
				nickname: function (student, type) {
					return this.account(student, type, 'nickname');
				},
				headimgurl: function (student, type) {
					var headimgurl = this.account(student, type, 'headimgurl');
					if (headimgurl) headimgurl = headimgurl.replace('http://', 'https://');
					return headimgurl;
				},
				phone: function (student, type) {
					return this.account(student, type, 'phone');
				},
				avatar: function (student, type) {
					var pic = this.account(student, type, 'avatar');
					if (!pic) return null;
					return '/static/' + this.schoolId + '/binding/' + pic;
				},
				changeClasses: function () {
					if (this.checkedIds.length === 0) {
						alert('请选择至少1个');
						return;
					}
					this.popup = true;
				},
				sure: function () {
					if (!this.toClassesId) {
						alert('请选择班级');
						return;
					}

					axios.put('/pc/student/classes/' + this.toClassesId, this.checkedIds).then(function (res) {
						this.getData();
						this.popup = false;
						alert('成功');
					}.bind(this));
				}
			},
			watch: {
				selectedDataSourceIndex: function (e) {

					var data = this.dataSource.filter((item, i) => {
						if (i == e) {
							return item;
						}
					})
					this.search.dataSource = data[0]

				},
				selectedDataStatusIndex: function (e) {

					var data = this.dataStatus.filter((item, i) => {
						if (i == e) {
							return item;
						}
					})
					this.search.dataStatus = data[0]

				},
				selectedDataIntentIndex: function (e) {

					var data = this.dataIntent.filter((item, i) => {
						if (i == e) {
							return item;
						}
					})
					this.search.dataIntent = data[0]

				}
			}

		}));
	</script>

</body>

</html>